/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-16 14:56:27
 * @LastEditTime: 2023-02-23 12:11:07
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Flex,
  Icon,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Spacer,
  useDisclosure,
  useColorModeValue,
} from '@chakra-ui/react';
import type { ReactElement, ReactNode } from 'react';
import { FaAngleRight } from 'react-icons/fa';

type AigcModalProps = {
  title?: string;
  triggerRight?: ReactElement;
  children: ReactNode;
};
export const changeUrl = (url: string) =>
  url?.startsWith('http') ? url : `${import.meta.env.VITE_APP_FILE_URL}${url}`;
export default function ParametersModal({
  children,
  triggerRight,
  title,
}: AigcModalProps) {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Flex
        onClick={onOpen}
        bg={useColorModeValue('base.950', 'base.850')}
        _hover={{
          bg: useColorModeValue('base.900', 'base.800'),
        }}
        borderRadius="base"
        minWidth="max-content"
        h="2rem"
        alignItems="center"
        py={1}
        px={3}
        cursor="pointer"
        color="base.100"
      >
        <Box fontSize="sm" fontWeight="600">
          {title}
        </Box>
        <Spacer />
        {triggerRight}
        <Icon as={FaAngleRight} fontSize="0.8rem" />
      </Flex>
      <Modal
        scrollBehavior="inside"
        isOpen={isOpen}
        onClose={onClose}
        size={{ base: 'xl', md: '2xl', lg: '3xl', xl: '4xl', '2xl': '5xl' }}
        isCentered
      >
        <ModalOverlay />
        <ModalContent bg="base.950" fontFamily="Inter">
          <ModalCloseButton />
          <ModalHeader fontWeight="bold" py={2}>
            {title}
          </ModalHeader>
          <ModalBody>
            <Flex
              justify="center"
              padding="0 0 1.5rem 0"
              width="100%"
              height="100%"
            >
              {children}
            </Flex>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}
